<template>
  <view style="padding: 15px;box-sizing: border-box;">
    志愿项目广场
    <view class="container">
      <scroll-view class="list" enable-flex>
        <view v-for="(item, index) in projects" :key="index" class="list-item" @click="showDetail(item)">
          <text class="list-item-title">{{ item.name }}</text>
          <text class="list-item-author">发起者: {{
              item.author
            }}
          </text>
          <text class="list-item-desc">{{ item.desc }}</text>
          <text class="list-item-statistics">共有{{ item.member.length }}人参与了此活动</text>
        </view>
      </scroll-view>
    </view>
    <!-- #ifndef H5 -->
    <fix-window/>
    <!-- #endif -->
    <el-dialog :visible.sync="showDialog" :title="dialog.name" class="dialog" width="600px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="4">发起者</el-col>
        <el-col :span="12">{{ dialog.author }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">活动成员</el-col>
        <el-col :span="12">
          <view class="members">
            <view v-if="dialog.member" v-for="m in dialog.member" :key="m.username" class="members-item">
						{{ m.username || m[0].username }}
            </view>
          </view>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">活动相册</el-col>
        <el-col :span="18">
          <view v-if="dialog.gallery" class="gallery">
            <el-image v-for="(i,idx) in dialog.gallery" :key="idx"
                      :src="i.img"
                      :preview-src-list="getImgList(dialog.gallery)"
                      @click="showDialog=false"/>
          </view>
        </el-col>
      </el-row>
      <el-row v-if="dialog.desc" :gutter="20">
        <el-col :span="4">活动介绍</el-col>
        <el-col :span="12">{{ dialog.desc }}</el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button type="primary" @click="join(dialog)">加入活动</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </view>
</template>

<script>
import {getProject} from "../../api/project";
import {
  mapMutations,
  mapState
} from 'vuex'

export default {
  data() {
    return {
      dialog: {},
      showDialog: false,
      projects: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created: function () {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.projects = []
      // 获取活动列表
      getProject(this.queryParams)
          .then(res => {
            this.total = res.length
            this.projects = res
          })
      this.loading = false
    },
    onpagination(e) {
      this.$refs.udb.loadData({
        current: e.current
      })
    },
    getImgList(l) {
      let a = []
      for (const lElement of l) {
        a.push(lElement.img)
      }
      return a
    },
    showDetail(item) {
      console.log(item);
      this.dialog = item
      this.showDialog = true
    },
    join(activity) {
      let that = this
      // 用户参加活动，把用户的id加到对应活动的member中
      this.$request("system/project/join", {user_id: this.userInfo._id, activityId: activity._id})
          .then(res => {
            if(res.result == "你已经添加该过活动了"){
							that.$message.error("你已经添加该过活动了")
						}else{
							that.$message.success("加入活动成功")	
						}
          })
          .catch(e => {
            console.log(e);
          })
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
  }
}
</script>

<style lang="scss">
/* #ifndef H5 */
page {
  padding-top: 85px;
}

/* #endif */

.list {
  width: 100%;
  max-height: calc(100% - 40px);

  &-item {
    width: 300px;
    height: 180px;
    border-radius: 10px;
    box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    margin: 10px;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    justify-content: space-between;
    cursor: pointer;

    &-title {
      width: 100%;
      font-size: 1.2em;
      font-weight: bold;
    }

    &-author {
      height: 1em;
    }

    &-desc {
      color: #cccccc;
    }

    &-statistics {
      color: #cccccc;
      font-size: 0.8em;
    }
  }
}

.dialog {
  .members {
    &-item {
      padding: 0 10rpx;
      border: 1px solid #cccccc;
      margin: 0 0 10rpx 20rpx;
      border-radius: 10rpx;
      display: inline-block;

    }
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 100%;
  }
}
</style>
